<template>
  <div class="cash-submit">
    <div class="notice border-bottom-1px">
      <p class="title">提现说明:</p>
      <p>1, 每天可提现:<span>{{ +data.set.day }}次</span></p>
      <p>2, 提现服务费:<span>{{ +data.set.service }}%</span></p>
      <p>3,第三方收取提现6%提现手续费
        公司回馈用户，手续费转化成积分，1元手续费=10积分积分可到积分商城换购产品
        提现到账时间：T+2(2个工作日内)</p>
    </div>
    <div class="form">
      <p>
        <label>ID:</label>
        <span>
          <cube-input type="text" v-model="data.user.id" disabled />
        </span>
      </p>
      <p>
        <label>可提金额:</label>
        <span>
          <cube-input type="text" v-model="data.balance" disabled />
        </span>
      </p>
      <template>
        <p>
          <label class="color">银行:</label>
          <span>
            <cube-input type="text" v-model="postForm.bank.bank_name" />
          </span>
        </p>
        <p>
          <label class="color">开户行:</label>
          <span>
            <cube-input type="text" v-model="postForm.bank.bank_x" />
          </span>
        </p>
        <p>
          <label class="color">卡号:</label>
          <span>
            <cube-input type="text" v-model="postForm.bank.bank_number" />
          </span>
        </p>
        <p>
          <label class="color">姓名:</label>
          <span>
            <cube-input type="text" v-model="postForm.bank.nickname" />
          </span>
        </p>
        <p>
          <label class="color">预留手机:</label>
          <span>
            <cube-input type="text" v-model="postForm.bank.mobile" />
          </span>
        </p>
      </template>
      <p>
        <label class="color">提现金额:</label>
        <span>
          <cube-input type="text" v-model="postForm.amount" ref="amount" />
        </span>
      </p>
      <p>
        <label></label>
        <span class="tips">最小提现金额为{{ +data.set.mini }}</span>
      </p>
      <p class="submit">
        <span @click="submit">提现</span>
      </p>
    </div>
    <loading :show="loading" />
  </div>
</template>

<script>
import Loading from '@/components/Loading'
import api from '@/api'
import base64 from '@/util/base64'
export default {
  name: 'Cash',
  components: {
    Loading
  },
  data() {
    return {
      loading: false,
      data: {
        user: {},
        balance: 0,
        set: {}
      },
      postForm: {
        bank: {}
      }
    }
  },
  methods: {
    fetchData() {
      this.loading = true
      api.My.cashFetch().then(response => {
        let { data } = response
        data = base64.parse(data)
        this.data = data
        this.postForm.amount = +data.set.mini
        if (data.bank && data.bank.bank_number) {
          this.postForm.bank = data.bank
        }
      }).finally(() => {
        this.loading = false
      })
    },
    submit() {
      const mini = this.data.set.mini
      const amount = this.postForm.amount
      console.log(amount, mini)
      if (!amount || +amount < 0 || isNaN(+amount) || +amount < +mini) {
        return this.$createToast({
          type: 'error',
          txt: '提现金额错误1',
          time: 1000
        }).show()
      }
      if (+amount > +this.data.balance) {
        return this.$createToast({
          type: 'error',
          txt: '余额不足',
          time: 1000
        }).show()
      }
      // check cash password
      this.$createDialog({
        type: 'prompt',
        title: '支付密码',
        prompt: {
          placeholder: '请输入支付密码',
          type: 'password',
          eye: false,
          clearable: true
        },
        onConfirm: (e, value) => {
          if (value === undefined) {
            return this.$createToast({
              type: 'error',
              time: 1000,
              txt: '请输入支付密码',
            }).show()
          }
          api.User.payPassword({ password: value }).then(() => {
            this.save()
          }).catch(err => {
            this.$createToast({
              type: 'error',
              time: 3000,
              txt: err.message
            }).show()
          })
        }
      }).show()
    },
    save() {
      this.loading = true
      api.My.cashSave({
        ...this.postForm
      }).then(() => {
        this.$createToast({
          type: 'correct',
          txt: '提现成功,请等待审核',
          time: 1000,
          onTimeout: () => {
            this.$emit('ok')
          }
        }).show()
      }).finally(() => {
        this.loading = false
      })
    }
  },
  created () {
    this.fetchData()
  },
  mounted () {
    this.$nextTick(() => {
      this.$refs.amount.focus()
    })
  }
}
</script>

<style scoped lang="stylus">
.cash-submit
  .notice
    margin 10px
    background white
    padding 10px
    border-radius 10px
    p
      line-height 20px
      text-align left
      &.title
        font-weight 700
        font-size 14px
      span
        color red
  .form
    margin 20px
    padding 20px 10px
    background white
    border-radius 10px
    p
      display flex
      height 40px
      line-height 40px
      margin-bottom 10px
      label
        width 65px
        text-align right
        padding-right 10px
        font-weight 700
        &.color
          color red
      span
        flex 1
        padding-right 10px
        &.tips
          text-align left
          color $main_color
          margin-top -10px
      &.submit
        display block
        height 33px
        line-height 33px
        span
          display inline-block
          background $main_color
          color white
          padding 0 50px
          border-radius 15px
</style>
